<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Promo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="scripts/jquery.tmpl.js"></script>
    <!--<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2.js"></script>-->

    <link rel="stylesheet" type="text/css" href="styles/style.css">

    <script id="promoTemplate" type="text/x-jquery-tmpl">
        {{each values}}
        <li class="{{if $value['whichClass']}} ${$value['whichClass']} {{/if}} ">
            <img src="pic/${$value['picture']}" class=""/>
            <div class="aligner">
                <h3>${$value['title']}</h3>
                <p>${$value['info']}</p>
            </div>
        </li>
        {{/each}}
    </script>

    <script id="buttonsTemplate" type="text/x-jquery-tmpl">
        {{each values}}
        <li class="">
            <a href="#slideshow-${$index}" rel="${$index}"><!--${$index + 1}--></a>
        </li>
        {{/each}}
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            var news = { values: [
                { title: "Awesome", picture: "120px-Awesome.png", info: "fish", whichClass: 'first' },
                { title: "Awosome", picture: "120px-Awosome.png", info: "fish" },
                { title: "Eyebrow", picture: "120px-Eyebrow.jpg", info: "fish" },
                { title: "HowdoiAwesomeanswer", picture: "120px-HowdoiAwesomeanswer.png", info: "fish" },
                { title: "Shocksmilie", picture: "120px-Shocksmilie.png", info: "fish"},
                { title: "Squaresmilie", picture: "120px-Squaresmilie.gif", info: "fish"},
                { title: "Tardsmilie", picture: "120px-Tardsmilie.jpg", info: "fish", whichClass: 'last'}
            ]};

            $("#promoTemplate").tmpl(news).appendTo(".slideshow");
            $('#buttonsTemplate').tmpl(news).appendTo('.slideshow-buttons');
            //$.fn.slide(news.values[0], 960, 7, 1000);
            $('.slideshow').slide(news.values, 7);
        });
    </script>
</head>
<body>

<div class="ribbon">
    <div class="wrapper">
        <div class="slideshow-wrap">
            <ul class="slideshow-buttons">

            </ul>
            <div class="slideshow-inner">
                <ul class="slideshow">

                </ul>
            </div>
            <div class="nav-play">
                <p>&#9658;</p>
                <img alt="hio" src="pic/"/>
            </div>
            <div class="nav-left">
                <p>&#60;</p>
                <img alt="hio" src="pic/"/>
            </div>
            <div class="nav-right">
                <p>&#62;</p>
                <img alt="hio" src="pic/"/>
            </div>
        </div>
    </div>
</div>
<!--<script type="text/javascript" src="scripts/kickstart.js"></script>-->
<script type="text/javascript" src="scripts/promo.js"></script>
</body>
</html>